<template>
  <div style="width: 96%;background-color: #f5f5f5;margin: 0 auto;">
    <div style="width: 100%;height: 60px;line-height: 60px;border: 1px dashed #ddd;background-color: #eee;">
      <span style="padding-left: 20px;">学习计划表</span>
    </div>
    <!-- 背景为白色 边框为虚线 卡片的阴影效果 -->
    <div style="display: flex;width: 100%;height: 120px;background-color: #fff;box-shadow: 0 0 10px #ddd;border: 1px dashed #ddd;">
      <div style="display: flex;margin-top: 20px;margin-left: 20px;width: 30%;">
        <div style="height: 40px;padding-left:15px;padding-right: 15px;line-height: 40px;background-color: #eee;border-radius: 5px 0 0 5px;border: 1px dashed #ddd;">学习科目</div>
        <input type="text" v-model="subject" class="input-placeholder" placeholder="请输入学习科目" style="height: 38px;width: 60%;border: 1px solid #ddd;font-size: 16px;border: 1px dashed #ddd;">
      </div>
      <div style="display: flex;position: relative;left: -50px;margin-top: 20px;margin-left: 10px;width: 30%;">
        <div style="height: 40px;padding-left:15px;padding-right: 15px;line-height: 40px;background-color: #eee;border-radius: 5px 0 0 5px;border: 1px dashed #ddd;">学习内容</div>
        <textarea v-model="content" class="textarea-placeholder" placeholder="请输入学习内容" style="height: 37px;width: 60%;border: 1px solid #ddd;font-size: 16px;border: 1px dashed #ddd;"></textarea>
      </div>
      <div style="display: flex;position: relative;left: -110px;margin-top: 20px;margin-left: 20px;width: 17%;">
        <div style="height: 40px;padding-left:15px;padding-right: 15px;line-height: 40px;background-color: #eee;border-radius: 5px 0 0 5px;border: 1px dashed #ddd;">学习地点</div>
        <!-- 下拉列表 -->
        <select v-model="place" style="height: 42px;width: 32%;border: 1px solid #ddd;font-size: 16px;border: 1px dashed #ddd;">
          <option :value="item" v-for="item in subject_list" :key="item">{{item}}</option>
        </select>
      </div>
      <button @click="add" style="position: relative;height: 40px;top: 20px;left: -150px;width: 70px;font-size: 16px;">添加</button>
    </div>
    <table style="width: 100%;margin:1px auto;border-collapse: collapse;">
      <thead style="background-color: white;">
        <tr>
          <th style="width: 5%;" class="title">序号</th>
          <th style="width: 20%;" class="title">学习科目</th>
          <th style="width: 42%;" class="title">学习内容</th>
          <th style="width: 10%;" class="title">学习地点</th>
          <th style="width: 15%;" class="title">完成状态</th>
          <th style="width: 8%;" class="title">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr style="height: 40px;" :class="index % 2 == 0 ? 'even' : 'odd'" v-for="(item,index) in tableDate" :key="item.id">
          <td class="tableContent">{{item.id}}</td>
          <td class="tableContent">{{item.subject}}</td>
          <td class="tableContent">{{item.content}}</td>
          <td class="tableContent">{{item.place}}</td>
          <td class="tableContent" style="display: flex;align-items: center;">
            <div @click="item.status = item.status === '未完成' ? '已完成' : '未完成'" v-if="item.status === '未完成'" class="noCompleted"></div>
            <div @click="item.status = item.status === '未完成' ? '已完成' : '未完成'" v-else class="completed"></div>
            <button @click="item.status = item.status === '未完成' ? '已完成' : '未完成'" class="statusBtn">{{ item.status }}</button>
          </td>
          <td class="tableContent">
            <!-- 样式为只保留文字和一个下划线 -->
            <button @click="del(index)" class="delBtn">删除</button>
          </td>  
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const subject = ref('')
const content = ref('')
const place = ref('')
const subject_list = reactive(['图书馆', '自习室'])
const tableDate = reactive([
  {
    id: 1,
    subject: 'Vue.js前端实战开发',
    content: '学习指令，例如v-if、v-for、v-model等',
    place: '自习室',
    status: '未完成'
  },
  {
    id: 2,
    subject: 'JavaScript',
    content: '运算符',
    place: '图书馆',
    status: '已完成'
  }
])

function add() {
  if (!subject.value || !content.value || !place.value) {
    alert('请填写完整信息')
    return
  }
  tableDate.push({
    id: tableDate.length + 1,
    subject: subject.value,
    content: content.value,
    place: place.value,
    status: '未完成'
  })
  subject.value = ''
  content.value = ''
  place.value = ''
}

function del(index) {
  if(tableDate[index].status === '已完成'){
    tableDate.splice(index, 1)
  }
  else{
    alert('请先完成该条学习记录');
    return;
  }
}
</script>

<style scoped>
.input-placeholder::placeholder {
  font-family: 楷体;
  padding-left: 10px;
  color: #999;
  font-size: 16px;
}
.textarea-placeholder::placeholder {
  font-family: 楷体;
  padding-top: 8px;
  padding-left: 10px;
  color: #999;
  font-size: 16px;
}
.odd {
  background-color: white;
}
.even {
  background-color: #eee;
}
.title {
  height: 50px;
  border: 1px dashed #ddd;
  line-height: 50px;
  text-align: left;
  padding-left: 15px;
  border-bottom: 3px solid black;
}
.tableContent {
  padding-left: 15px;
  border: 1px dashed #ddd;
  height: 40px;
}

/* 未完成状态 */
.noCompleted {
  border: 1px solid #999;
  background-color: white;
  border-radius: 10px;
  width: 50px;
  height: 20px;
  position: relative;
}
.noCompleted::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: #999;
  border-radius: 50%;
  transition: left 0.3s ease;
}

/* 已完成状态 */
.completed {
  /* 开关的圆角矩形 */
  background-color: #999;
  border-radius: 10px;
  width: 50px;
  height: 20px;
  position: relative;
}
.completed::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  transition: right 0.3s ease;
}
.statusBtn {
  margin-left: 15px;
  height: 20px;
  line-height: 20px;
  /* 背景颜色为透明色 */
  background-color: transparent;
  /* 去除边框 */
  border: none;
}
.delBtn {
  font-size: 15px;
  /* 背景颜色为透明色 */
  background-color: transparent;
  /* 去除边框 */
  border: none;
  /* 下划线 */
  text-decoration: underline;
}
</style>